<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放列表详情 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .playlist-detail-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .playlist-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }

        .breadcrumb a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .playlist-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .public-badge {
            display: inline-block;
            padding: 4px 12px;
            background: #4caf50;
            color: white;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .playlist-meta {
            display: flex;
            gap: 20px;
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }

        .playlist-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .playlist-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }

        .action-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .action-btn.primary {
            background: var(--primary-color);
            color: white;
        }

        .action-btn.primary:hover {
            background: #1e5f7a;
        }

        .action-btn.secondary {
            background: #f5f5f5;
            color: #666;
        }

        .action-btn.secondary:hover {
            background: #e0e0e0;
        }

        .videos-section {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .section-header {
            padding: 20px;
            background: var(--neutral-light);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-dark);
        }

        .add-video-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .add-video-btn:hover {
            background: #1e5f7a;
        }

        .videos-list {
            padding: 20px;
        }

        .video-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }

        .video-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .video-thumbnail {
            width: 80px;
            height: 60px;
            background: #f0f0f0;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 24px;
            margin-right: 16px;
            flex-shrink: 0;
        }

        .video-info {
            flex: 1;
        }

        .video-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 4px;
        }

        .video-meta {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }

        .video-description {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-actions {
            display: flex;
            gap: 8px;
        }

        .video-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.3s ease;
        }

        .video-btn.primary {
            background: var(--primary-color);
            color: white;
        }

        .video-btn.primary:hover {
            background: #1e5f7a;
        }

        .video-btn.danger {
            background: #ffebee;
            color: #d32f2f;
        }

        .video-btn.danger:hover {
            background: #ffcdd2;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: var(--neutral-dark);
        }

        .empty-state p {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .order-number {
            background: var(--primary-color);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            margin-right: 12px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container-fluid">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <a href="index.html" class="navbar-brand">
                    📚 局域网视频学习系统
                </a>
                <div style="display: flex; align-items: center; gap: 20px;">
                    <a href="index.html" style="color: var(--neutral-dark); text-decoration: none;">
                        🏠 首页
                    </a>
                    <a href="favorites.html" style="color: var(--neutral-dark); text-decoration: none;">
                        ❤️ 我的收藏
                    </a>
                    <a href="playlists.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📋 播放列表
                    </a>
                    <a href="exams.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📝 考试中心
                    </a>
                    <a href="profile.html" style="color: var(--neutral-dark); text-decoration: none;">
                        👤 个人资料
                    </a>
                    <span style="color: var(--neutral-dark);">
                        <span data-user-name>学生</span>
                    </span>
                    <button onclick="logout()" class="logout-btn">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">

        <div class="playlist-detail-container">
            <!-- 播放列表头部 -->
            <div class="playlist-header">
                <div class="breadcrumb">
                    <a href="playlists.html">我的播放列表</a>
                    <span>></span>
                    <span id="playlistNameBreadcrumb">播放列表详情</span>
                </div>
                <div class="playlist-title" id="playlistTitle">
                    <span id="playlistName">播放列表名称</span>
                    <span class="public-badge" id="publicBadge" style="display: none;">公开</span>
                </div>
                <div class="playlist-meta">
                    <span>创建者: <span id="playlistCreator">-</span></span>
                    <span>视频数量: <span id="videoCount">0</span></span>
                    <span>创建时间: <span id="createTime">-</span></span>
                    <span>更新时间: <span id="updateTime">-</span></span>
                </div>
                <div class="playlist-description" id="playlistDescription">
                    播放列表描述将在这里显示...
                </div>
                <div class="playlist-actions">
                    <button class="action-btn primary" onclick="playAll()">播放全部</button>
                    <button class="action-btn secondary" onclick="editPlaylist()">编辑播放列表</button>
                </div>
            </div>

            <!-- 视频列表 -->
            <div class="videos-section">
                <div class="section-header">
                    <div class="section-title">视频列表</div>
                    <button class="add-video-btn" onclick="showAddVideoModal()">添加视频</button>
                </div>
                <div class="videos-list" id="videosContent">
                    <div class="loading">
                        <div class="loading-pulse" style="margin-bottom: 12px;"></div>
                        <p>加载视频列表...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script>
        let currentPlaylist = null;
        let playlistVideos = [];
        let playlistId = null;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            playlistId = Utils.getUrlParam('id');
            if (!playlistId) {
                showError('播放列表ID不存在');
                return;
            }
            
            loadPlaylistDetail();
        });

        // 加载播放列表详情
        async function loadPlaylistDetail() {
            try {
                const response = await API.get(`/playlist/${playlistId}`);
                
                if (response.success) {
                    currentPlaylist = response.playlist;
                    renderPlaylistHeader();
                    loadPlaylistVideos();
                } else {
                    showError('播放列表不存在或权限不足');
                }
            } catch (error) {
                console.error('加载播放列表详情失败:', error);
                showError('加载播放列表详情失败，请稍后重试');
            }
        }

        // 渲染播放列表头部
        function renderPlaylistHeader() {
            if (!currentPlaylist) return;
            
            document.getElementById('playlistNameBreadcrumb').textContent = currentPlaylist.name;
            document.getElementById('playlistName').textContent = currentPlaylist.name;
            document.getElementById('playlistCreator').textContent = currentPlaylist.userName || '未知用户';
            document.getElementById('videoCount').textContent = currentPlaylist.videoCount || 0;
            document.getElementById('createTime').textContent = Utils.formatTime(currentPlaylist.createdTime);
            document.getElementById('updateTime').textContent = Utils.formatTime(currentPlaylist.updatedTime);
            document.getElementById('playlistDescription').textContent = currentPlaylist.description || '暂无描述';
            
            if (currentPlaylist.isPublic) {
                document.getElementById('publicBadge').style.display = 'inline-block';
            }
        }

        // 加载播放列表视频
        async function loadPlaylistVideos() {
            try {
                const response = await API.get(`/playlist/${playlistId}/videos`);
                
                if (response.success) {
                    playlistVideos = response.videos || [];
                    renderVideos();
                } else {
                    showError('加载视频列表失败');
                }
            } catch (error) {
                console.error('加载视频列表失败:', error);
                showError('加载视频列表失败，请稍后重试');
            }
        }

        // 渲染视频列表
        function renderVideos() {
            const container = document.getElementById('videosContent');
            
            if (playlistVideos.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i>🎥</i>
                        <h3>暂无视频</h3>
                        <p>这个播放列表还没有添加任何视频</p>
                        <button class="btn btn-primary" onclick="showAddVideoModal()">添加视频</button>
                    </div>
                `;
                return;
            }

            container.innerHTML = playlistVideos.map((video, index) => `
                <div class="video-item">
                    <div class="order-number">${index + 1}</div>
                    <div class="video-thumbnail">🎥</div>
                    <div class="video-info">
                        <div class="video-title">${video.videoTitle}</div>
                        <div class="video-meta">
                            <span>上传者: ${video.uploaderName}</span>
                            <span>上传时间: ${Utils.formatTime(video.uploadTime)}</span>
                            <span>观看次数: ${video.viewCount || 0}</span>
                        </div>
                        <div class="video-description">${video.videoIntro || '暂无简介'}</div>
                    </div>
                    <div class="video-actions">
                        <button class="video-btn primary" onclick="playVideo(${video.videoId})">
                            播放
                        </button>
                        <button class="video-btn danger" onclick="removeVideo(${video.videoId})">
                            移除
                        </button>
                    </div>
                </div>
            `).join('');
        }

        // 播放全部
        function playAll() {
            if (playlistVideos.length === 0) {
                Message.warning('播放列表中没有视频');
                return;
            }
            
            // 播放第一个视频
            const firstVideo = playlistVideos[0];
            playVideo(firstVideo.videoId);
        }

        // 播放视频
        function playVideo(videoId) {
            window.location.href = `player.html?id=${videoId}`;
        }

        // 编辑播放列表
        function editPlaylist() {
            window.location.href = `playlists.html`;
        }

        // 显示添加视频模态框
        function showAddVideoModal() {
            // 这里可以打开一个模态框来选择视频
            // 暂时跳转到视频列表页面
            window.location.href = 'index.html';
        }

        // 移除视频
        async function removeVideo(videoId) {
            const video = playlistVideos.find(v => v.videoId === videoId);
            if (!video) return;
            
            if (!confirm(`确定要从播放列表中移除"${video.videoTitle}"吗？`)) return;
            
            try {
                const response = await API.delete(`/playlist/${playlistId}/remove-video/${videoId}`);
                
                if (response.success) {
                    Message.success('视频已从播放列表移除');
                    loadPlaylistVideos();
                } else {
                    Message.error(response.message);
                }
            } catch (error) {
                console.error('移除视频失败:', error);
                Message.error('移除视频失败，请稍后重试');
            }
        }

        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('videosContent');
            container.innerHTML = `
                <div class="empty-state">
                    <i>❌</i>
                    <h3>加载失败</h3>
                    <p>${message}</p>
                    <button class="btn btn-primary" onclick="loadPlaylistDetail()">重新加载</button>
                </div>
            `;
        }

        // 退出登录
        async function logout() {
            if (confirm('确定要退出登录吗？')) {
                try {
                    UserManager.logout();
                    window.location.href = '../login.html';
                } catch (error) {
                    console.error('退出登录失败:', error);
                    Message.error('退出登录失败');
                }
            }
        }
    </script>
</body>
</html>
